import React, { useState } from 'react';
import { Layout, Tree, Table, Button, Modal, Input, Space, message } from 'antd';
import MainLayout from '../../../components/MainLayout';
import { 
  PlusOutlined, 
  MoreOutlined, 
  FolderOutlined, 
  FileOutlined,
  DownloadOutlined,
  DeleteOutlined,
  UploadOutlined
} from '@ant-design/icons';
import type { DataNode } from 'antd/es/tree';
import type { ColumnsType } from 'antd/es/table';
import styles from './index.module.css';

const { Sider, Content } = Layout;

interface TopicNode {
  key: string;
  title: string;
  children?: TopicNode[];
}

interface FileItem {
  key: string;
  name: string;
  type: string;
  topic: string;
  uploadTime: string;
  importance: string;
}

const LocalKnowledgePage: React.FC = () => {
  const [selectedTopic, setSelectedTopic] = useState<string>();
  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
  const [isNewTopicModalVisible, setIsNewTopicModalVisible] = useState(false);
  const [isTopicActionVisible, setIsTopicActionVisible] = useState(false);
  const [currentTopic, setCurrentTopic] = useState<string>();

  // 模拟数据
  const treeData: TopicNode[] = [
    {
      key: '1',
      title: '产业政策',
      children: [
        { key: '1-1', title: '国家政策' },
        { key: '1-2', title: '地方政策' },
      ]
    },
    {
      key: '2',
      title: '行业报告',
      children: [
        { key: '2-1', title: '季度报告' },
        { key: '2-2', title: '年度报告' },
      ]
    }
  ];

  const getImportanceTag = (importance: string) => {
    const classMap: Record<string, string> = {
      '高': styles.importanceHigh,
      '中': styles.importanceMedium,
      '低': styles.importanceLow,
    } as const;

    const className = classMap[importance as keyof typeof classMap] || '';
    
    return (
      <span className={`${styles.importanceTag} ${className}`}>
        {importance}
      </span>
    );
  };

  const columns: ColumnsType<FileItem> = [
    {
      title: '文件名称',
      dataIndex: 'name',
      key: 'name',
      render: (text) => (
        <Space>
          <FileOutlined />
          {text}
        </Space>
      )
    },
    {
      title: '文件类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '所属专题',
      dataIndex: 'topic',
      key: 'topic',
    },
    {
      title: '上传时间',
      dataIndex: 'uploadTime',
      key: 'uploadTime',
    },
    {
      title: '重要程度',
      dataIndex: 'importance',
      key: 'importance',
      render: (importance) => getImportanceTag(importance)
    }
  ];

  const fileData: FileItem[] = [
    {
      key: '1',
      name: '2024年产业政策分析.pdf',
      type: 'PDF',
      topic: '国家政策',
      uploadTime: '2024-03-15',
      importance: '高'
    },
    // ... 更多文件数据
  ];

  const handleTopicAction = (action: string) => {
    switch (action) {
      case 'newSubTopic':
        setIsNewTopicModalVisible(true);
        break;
      case 'upload':
        // 处理上传
        break;
      case 'rename':
        // 处理重命名
        break;
      case 'toTop':
        // 处理置顶
        break;
      case 'delete':
        // 处理删除
        break;
    }
  };

  const handleBatchAction = (action: string) => {
    if (selectedFiles.length === 0) {
      message.warning('请选择文件');
      return;
    }

    switch (action) {
      case 'download':
        // 处理下载
        break;
      case 'delete':
        // 处理删除
        break;
    }
  };

  return (
    <MainLayout>
      <Layout className={styles.container}>
        <Sider width={300} className={styles.sider}>
          <div className={styles.topicHeader}>
            <h3>知识专题库</h3>
            <Button 
              type="primary" 
              icon={<PlusOutlined />}
              onClick={() => setIsNewTopicModalVisible(true)}
            >
              新建
            </Button>
          </div>
          <Tree
            showIcon
            defaultExpandAll
            icon={<FolderOutlined />}
            treeData={treeData}
            onSelect={(keys) => setSelectedTopic(keys[0]?.toString())}
            titleRender={(node) => (
              <div className={styles.treeNode}>
                <span>{node.title}</span>
                <Button
                  type="text"
                  icon={<MoreOutlined />}
                  onClick={(e) => {
                    e.stopPropagation();
                    setCurrentTopic(node.key as string);
                    setIsTopicActionVisible(true);
                  }}
                />
              </div>
            )}
          />
        </Sider>
        <Content className={styles.content}>
          <div className={styles.toolbar}>
            <Space>
              <Button
                icon={<UploadOutlined />}
                onClick={() => handleBatchAction('upload')}
              >
                批量上传
              </Button>
              <Button
                icon={<DownloadOutlined />}
                onClick={() => handleBatchAction('download')}
              >
                批量下载
              </Button>
              <Button
                icon={<DeleteOutlined />}
                onClick={() => handleBatchAction('delete')}
                danger
              >
                批量删除
              </Button>
            </Space>
          </div>
          <Table
            columns={columns}
            dataSource={fileData}
            rowSelection={{
              onChange: (selectedRowKeys) => {
                setSelectedFiles(selectedRowKeys as string[]);
              }
            }}
          />
        </Content>

        <Modal
          title="新建专题"
          open={isNewTopicModalVisible}
          onOk={() => setIsNewTopicModalVisible(false)}
          onCancel={() => setIsNewTopicModalVisible(false)}
        >
          <Input placeholder="请输入专题名称" />
        </Modal>

        <Modal
          title="专题操作"
          open={isTopicActionVisible}
          footer={null}
          onCancel={() => setIsTopicActionVisible(false)}
        >
          <div className={styles.actionList}>
            <Button block onClick={() => handleTopicAction('newSubTopic')}>新建子专题</Button>
            <Button block onClick={() => handleTopicAction('upload')}>上传内容</Button>
            <Button block onClick={() => handleTopicAction('rename')}>重命名</Button>
            <Button block onClick={() => handleTopicAction('toTop')}>置顶</Button>
            <Button block danger onClick={() => handleTopicAction('delete')}>删除</Button>
          </div>
        </Modal>
      </Layout>
    </MainLayout>
  );
};

export default LocalKnowledgePage; 